<!-- 商品数量加减的组件 -->
<template>
	<view class="stepper">
		<!-- 这里自己写 -->
		<view class="stepContent">
			<view class="minus" @click="minus()">
				<image src="https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/mall/shopm_btn_reduce_default%404x.png" mode="aspectFill"></image>
			</view>
			<view class="input">
				<input v-model="num" @blur="blur" type="number" />
			</view>
			<view class="add" @tap="add()">
				<image src="https://zhinengjiayi.oss-cn-chengdu.aliyuncs.com/mall/shopm_btn_add_default%404x.png" mode="aspectFill"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "stepper",
		props: {
			itemNum: {
				type: Number,
				default: null
			},
			toZero: {
				type: Boolean,
				default: false
			},
			limitStock: {
				type: Number,
				default: null
			}
		},

		data() {
			return {
				num: 1,
				goodsStock: null
			};
		},
		mounted() {
			this.initializeNum(); // 在组件挂载后初始化 num 的值  
		},
		methods: {
			initializeNum() {
				if (this.itemNum !== null) {
					this.num = this.itemNum; // 如果传入了 itemNum，则将 num 初始化为 itemNum 的值  
				}
				if (this.limitStock !== null) {
					//如果传入
					this.goodsStock = this.limitStock;
				}

			},
			minus() {
				if (this.toZero) {
					if (this.num === 1) {
						this.$emit('minus', 0)
						return;
					}
				} else {
					if (this.num === 1) {
						// 如果 toZero 为 false，数量已经是1了，不再减少
						uni.$showMsg("不能再减少了");
						return;
					}
				}
				this.num--;
				this.$emit('minus', this.num)

			},
			add() {
				// 数量变更调后台接口
				if (this.goodsStock !== null) {
					if (this.num === this.goodsStock) {
						return uni.$showMsg('超过库存')
					}
				}

				if (this.num > 998) {
					return uni.$showMsg('不能再增加了')
				}
				console.log("增加商品")
				this.num++;
				this.$emit('add', this.num)

			},

			blur(event) {
				const newValue = Number(event.target.value.replace(/\s/g, ''));
				if (this.goodsStock !== null) {
					if (newValue > this.goodsStock) {
						this.num = 1;
						this.$emit('blur', this.num);
						return uni.$showMsg('超过库存')
					}
				}
				console.log("blur的值")
				console.log(newValue)
				if (this.toZero) {
					if (isNaN(newValue) || newValue < 0 || newValue > 999 || newValue === '') {
						this.num = 1;
						this.$emit('blur', this.num);
						return uni.$showMsg("请输入合法范围");
					} else {
						this.num = newValue;
						this.$emit('blur', this.num);
					}
				} else {
					if (isNaN(newValue) || newValue < 1 || newValue > 999 || newValue === '') {
						uni.$showMsg("请输入合法范围");
						this.num = 1;
						this.$emit('blur', this.num);
					} else {
						this.num = newValue;
						this.$emit('blur', this.num);
					}
				}
			},



		}
	}
</script>

<style lang="scss" scoped>
	.stepper {
		box-sizing: border-box;


		.stepContent {
			display: flex;
			width: 160rpx;
			height: 27rpx;
			flex-direction: row;
			align-items: center;

			.minus {
                
				height: 60rpx;
				width: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					height: 32rpx;
					width: 32rpx;
					box-sizing: border-box;
				}
			}

			.add {
				
				height: 60rpx;
				width: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					height: 32rpx;
					width: 32rpx;
					box-sizing: border-box;
				}
			}

			.input {

				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
				width: 98rpx;
				height: 32rpx;
				opacity: 1;
				border-radius: 6rpx;
				background: rgba(225, 225, 230, 1);
				margin: 0 5rpx;

			}
		}

	}
</style>